<template>
	<u-popup  @close="close" v-model="modelShows" mode="center" :width="modeWidth" :border-radius="16">
		<view class="">
			<view class="model_block" v-if="modelxs == 2">
				<view class="model_title1 flex_zhcenter">
					{{modelTitle}}
				</view>
				<view class="model_cont1">
					<u-parse :html="modelcont"></u-parse>			
				</view>
				<view class=" flex_hcneter model_tishi" @click="radios">
					 <radio color="#4240FF"  :checked="radioCH"></radio>
					 7天内不在提示
				</view>
				<view class="footer_bt1b">
					<view @click="confim" class="footer_bt1 flex_zhcenter">{{modelbtCancel}}</view>
				</view>
			</view>
			<view class="model_block" v-if="modelxs == 1">
				<view class="model_title flex_zhcenter" v-if="modelTitle">{{modelTitle || ''}}</view>
				<view class="model_cont flex_zhcenter" :style="{'padding-top':modelTitle ? '' : '50rpx'}">
					<u-parse :html="modelcont"></u-parse>
				</view>
				<view class="model_footer flex_hcneter">
					<view class="footer_bt flex_zhcenter" 
					v-if="modelbtCancel"  
					:style="{width:modelbtConfim ? '50%' : '100%'}"
					@click="close">{{modelbtCancel}}</view>
					<view 
					class="footer_bt flex_zhcenter" 
					:style="{width:modelbtCancel ? '50%' : '100%'}"
					v-if="modelbtConfim" 
					@click="confim">{{modelbtConfim}}</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	
	export default {
	  name: "index",
	  components: {
			
	  },
		props: {
			modelxs: {//弹窗形式
				type: [String,Number],
				default:()=>{
					return 1
				}
			},
			modeWidth: {//弹窗宽度
				type: [String,Number],
				default:()=>{
					return '606rpx'
				}
			},
			modelShow: {//弹窗显示
				type: [Boolean],
				default:()=>{
					return false
				}
			},
			modelTitle: {//弹窗标题
				type: [String],
				default:()=>{
					return '温馨提示'
				}
			},
			modelcont: {//弹窗内容
				type: [String],
				default:()=>{
					return '删除之后将无法恢复未开发票的将无法开发票'
				}
			},
			modelbtCancel: {//弹窗取消按钮
				type: [String],
				default:()=>{
					return '取消'
				}
			},
			modelbtConfim: {//弹窗确定按钮
				type: [String],
				default:()=>{
					return '确定'
				}
			},
		},
	  data() {
	    return {
				modelShows:false,//
				radioCH:false,
	    };
	  },
		watch:{
			modelShow(val){
				this.modelShows = val
			}
		},
	  mounted() {
			this.modelShows = this.modelShow
	  },
	  methods: {
			radios(){
				this.radioCH = !this.radioCH
			},
			pdRpx(e){
				return e.indexOf('rpx') == -1 ? (e.indexOf('%') == -1 ? e + 'rpx' : e) : e
			},
			confim(){//完成
				this.modelShows = false
				this.$emit('confim')
			},
			close(){//关闭弹窗
				this.modelShows = false
				this.$emit('close')
			},
	  }
	};
</script>

<style lang="less" scoped>
	.model_block{
		
		.model_title1{
			font-size: 36rpx;font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;color: #333333;text-align: center;margin-bottom: 30rpx;
			padding-top: 30rpx;
		}
		.model_cont1{
			padding: 0 30rpx 20rpx;font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;color: #333333;box-sizing: border-box;font-size: 30rpx;
		}
		.model_tishi{
			font-size: 24rpx;font-family: PingFang SC, PingFang SC-Bold;font-weight: 700;
			color: #999999;margin-bottom: 40rpx;padding-left: 20rpx;padding-right: 30rpx;
			radio{transform:  scale(0.7); }
		}
		.footer_bt1b{padding-bottom: 30rpx;}
		.footer_bt1{
			height: 84rpx;background: linear-gradient(135deg, #00C6FF 0%, #0076FF 95%, #0072FF 100%);
			border-radius: 14rpx 14rpx 14rpx 14rpx;color: #ffffff;
			font-size: 32rpx;font-weight: 400;margin: 0 30rpx;
		}
		
		.model_title{padding:48rpx 40rpx 38rpx;color: #2770FE;font-size: 48rpx;font-weight: bold;}
		.model_cont{padding: 0 40rpx 68rpx;font-size: 32rpx;text-align: center;}
		.model_footer{
			.footer_bt{
				width: 50%;height: 92rpx;color: #939393;border-top: 2rpx solid #B9B9B9;border-right: 2rpx solid #B9B9B9;
			}
			.footer_bt:last-child{border-right: 0rpx;color: #2770FE;}
		}
	}
</style>